<template>
  <el-collapse class="device-status">
    <el-collapse-item>
      <template slot="title">
        <div class="title" v-for="car of list" :key="car.code">
          <span>{{ car.state }}车辆</span>
          <span>
            <i class="indicator" :style="{ background: car.state === '离线' ? 'gray' : '' }" />
            <span>{{ car.count }}台</span>
          </span>
        </div>
      </template>
      <el-table :data="list" :cell-style="cellStyle">
        <el-table-column align="center" prop="code" label="机器码" />
        <el-table-column align="center" prop="type" label="车辆类型" />
        <el-table-column align="center" prop="state" label="车辆状态" />
      </el-table>
    </el-collapse-item>
  </el-collapse>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { state: '作业', count: 2, code: 33423423, type: '拖拉机' },
        { state: '在线', count: 2, code: 34434423, type: '拖拉机' },
        { state: '离线', count: 0, code: 37426423, type: '拖拉机' }
      ]
    }
  },
  methods: {
    cellStyle({ row, columnIndex }) {
      if (columnIndex !== 2) {
        return ''
      }
      return `color: ${row.state === '离线' ? 'gray' : '#13ce66'}`
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/assets/styles/element-variables.scss';

.device-status {
  position: absolute;
  right: 16px;
  top: 56px;
  border-radius: 4px;
  overflow: hidden;

  .title {
    display: flex;
    flex-direction: column;
    margin: 0 8px;

    > span {
      line-height: 2;
    }

    .indicator {
      display: inline-block;
      width: 10px;
      height: 10px;
      border-radius: 10px;
      margin: 0 4px;
      background: $--color-success;
    }
  }
}
</style>
